<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <%@include file="../header.jsp" %>
  <style type="text/css">
  
  </style>
  
</head>
<body style="font-size:62.5%;">
 <div class="add_btn btn">add</div> 
 <div class="remove_btn btn">remove</div> 
  <div class="enable_btn btn">enable</div> 
 <div class="disable_btn btn">disable</div>
<div class="select_btn btn">select</div>
<div class="rotate_btn btn">rotate</div>

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
       tab1
    </div>
    <div id="fragment-2">
    	tab2
     </div>
    <div id="fragment-3">
    	tab3
     </div>
     
</div>

	

<script type="text/javascript">
	$(function(){
		$(".btn").button();
		var tabs=$("#tabs").tabs({
			collapsible:true,
			fx:{opacity:"toggle"}
		});
		var div=$('<div id="four">').html("hello four");
		div.appendTo("#tabs");
		$(".add_btn").click(function(){
			$("#tabs").tabs("add","#four","my add");
			
		});
		$(".remove_btn").click(function(){
			$("#tabs").tabs("remove",$("#tabs").tabs("length")-1);
		})
		$(".enable_btn").click(function(){
			$("#tabs").tabs("enable",$("#tabs").tabs("length")-1);
		});
		$(".disable_btn").click(function(){
			$("#tabs").tabs("disable",$("#tabs").tabs("length")-1);
		})
		$(".select_btn").click(function(){
			$("#tabs").tabs("select",0);
		});
		$(".rotate_btn").click(function(){
			$("#tabs").tabs("rotate",2,true);
		})
	})
</script>
</body>
</html>